<template>
  <div class="entry">
    <el-card>
      <el-row type="flex" justify="center">
        <el-col :span="18" :sm="18" :xs="24">
          <el-form
            :model="employeeForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
            :inline="true"
            size="small"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="员工姓名" prop="empName">
                  <el-input v-model="employeeForm.empName" placeholder="员工姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="employeeForm.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birth">
                  <el-date-picker
                    v-model="employeeForm.birth"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="出生日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证" prop="idCard">
                  <el-input v-model="employeeForm.idCard" placeholder="身份证"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="empPhone">
                  <el-input v-model="employeeForm.empPhone" placeholder="联系电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="employeeForm.email" placeholder="邮箱"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="选择部门" prop="deptId">
                  <dept-select :value.sync="employeeForm.deptId" style="width:220px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择岗位" prop="staId">
                  <station-select :value.sync="employeeForm.staId" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="入职日期" prop="empDate">
                  <el-date-picker
                    v-model="employeeForm.empDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="入职日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="参加工作日期" prop="workDate">
                  <el-date-picker
                    v-model="employeeForm.workDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="参加工作日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="用工形式" prop="empType">
                  <el-radio-group v-model="employeeForm.empType">
                    <el-radio :label="1">正式员工</el-radio>
                    <el-radio :label="2">临时员工</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人员来源" prop="source">
                  <el-select v-model="employeeForm.source" placeholder="人员来源">
                    <el-option label="校园招聘" :value="1"></el-option>
                    <el-option label="社会招聘" :value="2"></el-option>
                    <el-option label="其他" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否需要试用期" prop="isInternship">
                  <el-radio-group v-model="employeeForm.isInternship">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="试用期范围" v-if="employeeForm.isInternship">
                  <el-date-picker
                    v-model="internshipDateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    class="date-range"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="政治面貌" prop="politics">
                  <el-select v-model="employeeForm.politics" placeholder="政治面貌">
                    <el-option label="党员" :value="1"></el-option>
                    <el-option label="预备党员" :value="2"></el-option>
                    <el-option label="团员" :value="3"></el-option>
                    <el-option label="其他" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民族" prop="folk">
                  <el-select v-model="employeeForm.folk" filterable placeholder="民族" clearable>
                    <el-option
                      v-for="item in nationData.data"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="籍贯" prop="nation">
                  <place-cascader :value.sync="employeeForm.nation" placeholder="籍贯" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身高" prop="height">
                  <el-input
                    class="append-input"
                    type="number"
                    v-model.number="employeeForm.height"
                    placeholder="身高"
                  >
                    <template slot="append">cm</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="血型" prop="blood">
                  <el-select v-model="employeeForm.blood" placeholder="血型">
                    <el-option label="A型" :value="1"></el-option>
                    <el-option label="B型" :value="2"></el-option>
                    <el-option label="AB型" :value="3"></el-option>
                    <el-option label="O型" :value="4"></el-option>
                    <el-option label="其他" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚姻状况" prop="maritalStatus">
                  <el-select v-model="employeeForm.maritalStatus" placeholder="婚姻状况">
                    <el-option label="未婚" :value="1"></el-option>
                    <el-option label="已婚" :value="2"></el-option>
                    <el-option label="离婚" :value="3"></el-option>
                    <el-option label="丧偶" :value="4"></el-option>
                    <el-option label="其他" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="出生地" prop="birthPlace">
                  <place-cascader :value.sync="employeeForm.birthPlace" placeholder="出生地" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="户口所在地" prop="registeredPlace">
                  <place-cascader :value.sync="employeeForm.registeredPlace" placeholder="户口所在地" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="最高学历" prop="highestEdu">
                  <el-select v-model="employeeForm.highestEdu" placeholder="最高学历">
                    <el-option label="高中以下" :value="1"></el-option>
                    <el-option label="大专" :value="2"></el-option>
                    <el-option label="本科" :value="3"></el-option>
                    <el-option label="研究生" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高学位" prop="highestDegree">
                  <el-select v-model="employeeForm.highestDegree" placeholder="最高学位">
                    <el-option label="无学位" :value="1"></el-option>
                    <el-option label="学士" :value="2"></el-option>
                    <el-option label="双学士" :value="3"></el-option>
                    <el-option label="硕士" :value="4"></el-option>
                    <el-option label="博士" :value="5"></el-option>
                    <el-option label="博士后" :value="6"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="毕业院校" prop="graSchool">
                  <el-input v-model="employeeForm.graSchool" placeholder="毕业院校"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业" prop="speciality">
                  <el-input v-model="employeeForm.speciality" placeholder="专业"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="毕业时间" prop="graDate">
                  <el-date-picker
                    v-model="employeeForm.graDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="毕业时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="8">
                <el-form-item style="margin-top:10px">
                  <el-button type="primary" @click="submitForm('ruleForm')">确定入职</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="3.5">
          <el-upload
            :class="{'avatar-uploader': true, 'none-border': employeeForm.avatar!==undefined}"
            :action="baseUrl + '/upload/single/1'"
            :headers="{Authorization: token}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="employeeForm.empAvatar" :src="employeeForm.empAvatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="text-align:center;font-size:14px;color:#ccc">员工头像</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { base_url } from "@/api/apiConfig";
import { insertEmpApi } from "@/api/employee";
import nationData from "@/utils/nation56";
export default {
  name: "Entry",
  data() {
    return {
      employeeForm: {
        // 员工名
        empName: undefined,
        // 性别，1男，2女，默认1
        sex: undefined,
        // 生日
        birth: undefined,
        // 身份证
        idCard: "440582199001026623",
        // 所属部门
        deptId: undefined,
        // 所属岗位
        staId: undefined,
        // 入职时间
        empDate: undefined,
        // 参加工作日期
        workDate: undefined,
        // 用工形式1：正式员工，2：临时员工；默认1
        empType: undefined,
        // 联系电话
        empPhone: undefined,
        // 邮箱
        email: undefined,
        // 人员来源1：校园招聘2：社会招聘3：其它;默认1
        source: undefined,
        // 政治面貌1党员2：预备党员3：团员4：其他，默认1
        politics: undefined,
        // 民族
        folk: undefined,
        // 籍贯
        nation: undefined,
        // 身高，单位cm
        height: undefined,
        // 血型，1：A型,2:B型，3：AB型，4：O型，5：其他，默认1
        blood: undefined,
        // 婚姻状况，1：未婚，2：已婚，3：离婚，4：丧偶,5:其他，默认1
        maritalStatus: undefined,
        // 出身地
        birthPlace: undefined,
        // 户口所在地
        registeredPlace: undefined,
        // 最高学历,1高中以下，2大专，3本科，4研究生，默认1
        highestEdu: undefined,
        // 最高学位，1无学位，2学士，3双学士，4硕士，5博士，6博士后；默认1
        highestDegree: undefined,
        // 毕业院校
        graSchool: undefined,
        // 专业
        speciality: undefined,
        // 毕业时间
        graDate: undefined,
        // 状态，0离职，1在职，默认为1
        status: undefined,
        // 是否是实习生，0不是，1是，默认1
        isInternship: undefined,
        // 头像
        empAvatar: undefined,
      },
      // 试用期范围
      internshipDateRange: undefined,
      imageUrl: "",
      baseUrl: base_url,
      rules: {
        empName: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        birth: [
          {
            required: true,
            type: "string",
            message: "请填写生日",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "请填写身份证", trigger: "blur" },
          // eslint-disable-next-line no-useless-escape
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请填写正确的身份证",
            trigger: "blur",
          },
        ],
        empPhone: [
          { required: true, message: "请填写手机号码", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],
        email: [
          { type: "email", message: "请填写正确的邮箱", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请为员工分配部门", trigger: "blur" },
        ],
        staId: [
          { required: true, message: "请为员工分配部门", trigger: "blur" },
        ],
        empDate: [
          {
            required: true,
            type: "string",
            message: "请填写入职时间",
            trigger: "blur",
          },
        ],
        workDate: [
          {
            required: true,
            type: "string",
            message: "请填写工作时间",
            trigger: "blur",
          },
        ],
        empType: [
          { required: true, message: "请选择用工形式", trigger: "blur" },
        ],
        source: [
          { required: true, message: "请选择人员来源", trigger: "blur" },
        ],
        isInternship: [
          { required: true, message: "请选择是否需要试用期", trigger: "blur" },
        ],
      },
      nationData: nationData,
    };
  },
  created() {},
  computed: {
    token() {
      return this.$store.state.userModule.token;
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        let internshipStartDate;
        let internshipEndDate;
        if (this.employeeForm.isInternship) {
          [internshipStartDate, internshipEndDate] = this.internshipDateRange;
        }
        const { code } = await insertEmpApi(
          this.employeeForm,
          internshipStartDate,
          internshipEndDate
        );
        if (code !== 200) return;
        this.employeeForm.empAvatar = undefined;
        this.$message.success("员工入职成功");
        this.resetForm("ruleForm");
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res) {
      this.employeeForm.empAvatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  components: {},
};
</script>
<style lang="scss">
.entry {
  .el-input--small .el-input__inner {
    width: 220px;
  }
  .append-input {
    .el-input__inner {
      width: 160px;
    }
  }
  .date-range.el-date-editor {
    width: 220px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 130px;
    height: 148px;
    object-fit: cover;
    display: block;
  }
}
</style>
<style scoped lang="scss">
</style>
